import React from 'react';
import {View, Text, StyleSheet, Image} from 'react-native';
import {getRealSize, Touchable} from '../utils';
import PropTypes from 'prop-types';
import FAIcon from 'react-native-vector-icons/FontAwesome5';
import ThemeStyles from '../styles';
import FastImage from 'react-native-fast-image';
import {Pie} from 'react-native-progress';
import {UploadState} from './file-upload';

export default class ListItem extends React.Component {
  static propTypes = {
    styles: PropTypes.object,
    onPress: PropTypes.func,
    icon: PropTypes.element,
    label: PropTypes.string,
    extra: PropTypes.string,
    avatar: PropTypes.object,
    arrow: PropTypes.bool,
  };

  static defaultProps = {
    styles: {},
    onPress: () => {},
    label: '',
  };

  render() {
    const {icon, label, extra, onPress, avatar, arrow} = this.props;
    // console.log(label, extra);
    return (
      <Touchable onPress={() => onPress()}>
        <View style={Styles.container}>
          {icon}
          <Text style={Styles.label} numberOfLines={1}>
            {label}
          </Text>
          {extra ? (
            <Text style={Styles.extra} numberOfLines={1}>
              {extra}
            </Text>
          ) : null}
          {avatar && (
            <View style={Styles.image}>
              {avatar.state === UploadState.UPLOADING ? (
                <View style={Styles.progress}>
                  <Pie
                    progress={Number(avatar.rate || 0)}
                    size={getRealSize(42)}
                  />
                </View>
              ) : (
                <FastImage
                  style={Styles.avatar}
                  source={{
                    uri: avatar.url,
                    priority: FastImage.priority.normal,
                  }}
                  resizeMode={FastImage.resizeMode.stretch}
                />
              )}
            </View>
          )}
          {icon && (
            <FAIcon
              name="chevron-right"
              color="#8F8F8F"
              size={getRealSize(12)}
            />
          )}
          {arrow && (
            <FAIcon
              name="chevron-right"
              color="#8F8F8F"
              size={getRealSize(12)}
            />
          )}
        </View>
      </Touchable>
    );
  }
}

const Styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: getRealSize(28),
    paddingVertical: getRealSize(12),
    borderBottomColor: ThemeStyles.Color.line.color,
    borderBottomWidth: 1,
  },
  label: {
    color: '#333333',
    fontSize: getRealSize(16),
    flex: 1,
    marginLeft: getRealSize(4),
  },
  extra: {
    color: '#757575',
    fontSize: getRealSize(16),
    textAlign: 'right',
    // width: getRealSize(48),
    flex: 1,
    marginRight: getRealSize(16),
  },
  avatar: {
    width: getRealSize(56),
    height: getRealSize(56),
    borderRadius: getRealSize(56),
    marginRight: getRealSize(16),
  },
  image: {
    width: getRealSize(56),
    height: getRealSize(56),
    borderRadius: getRealSize(56),
    marginRight: getRealSize(16),
    borderColor: '#333',
    backgroundColor: ThemeStyles.Color.background.content.backgroundColor,
  },
  progress: {},
});
